<template>
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="100px" class="single-form">

      <el-row>
        <el-col  :xs="20" :sm="20" :md="20" :lg="20">
          <el-form-item label="题干：" prop="title"  >
            <el-input type="textarea"  @focus="handleRichEditor(10)" v-model="form.title"  />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :xs="20" :sm="20" :md="20" :lg="20">
          <el-form-item label="解析：" prop="analyze" class="analyze">
            <el-input @focus="handleRichEditor(11)" v-model="form.analyze" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :xs="20" :sm="20" :md="20" :lg="20">
          <el-form-item label="正确答案：" prop="correctArray" class="analyze">
            <el-input type="textarea" @focus="handleRichEditor(12)" v-model="form.correctArray" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item class="buttons" >
        <el-button style="margin-left: 5%" type="primary" @click="submit">提交</el-button>
        <el-button style="margin-left: 5%" @click="reset">重置</el-button>
        <el-button style="margin-left: 5%" type="success" @click="preview">预览</el-button>
      </el-form-item>
    </el-form>


    <!-- 富文本弹出框 -->
    <el-dialog :visible.sync="editorVisible" align="center" :before-close="handleClose">
      <div class="edit_container">
        <quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange()">
        </quill-editor>
      </div>
      <el-row>
        <el-button class="editor_confirm" type="primary" @click="handleRichEditorConfirm(editorId)">确定</el-button>
        <el-button class="editor_cancel" @click="handleRichEditorCancel">取消</el-button>
      </el-row>
    </el-dialog>


    <!-- 预览内容弹出 -->
    <el-dialog :visible.sync="previewVisible" align="left" width="50%">
      <el-form :model="form" ref="form" label-width="100px" >

        <el-row>
          <el-form-item label="题干：" >
            <span class="preview_img" v-html="form.title"></span>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="解析：" >
            <span v-html="form.analyze"></span>
          </el-form-item>
        </el-row>

        <el-form-item label="正确答案：">
          <span v-html="form.correctArray"></span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { quillEditor } from "vue-quill-editor"; //调用编辑器
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";

  import {addQuestion} from '../../../api/index'
  import { queryQuestionPage, updateQuestion } from '../../../api';
  export default {
    name: 'FillCreate',
    data() {
      return {
        editorId: 0,
        form: {
          id: '',
          questionType: 4,
          title: '',
          items: [
            { prefix: '1', content: '什么' },
            { prefix: '2', content: '什么' },
          ],
          analyze: '',
          correctArray: '',
          score: 0,
        },
        subjectFilter: null,
        formLoading: false,
        editorVisible: false,
        previewVisible: false,
        content: '',
        editorOption: {
          placeholder: 'Hello World'
        },
        questionShow: {
          qType: 0,
          dialog: false,
          question: null,
          loading: false
        }
      }
    },
    created() {

    },
    async mounted() {
      let id = this.$route.query.id;
      if (!(id === undefined)) {
        //发送请求
        console.log(id);

        const data = await queryQuestionPage({ id: id, type: '' });
        console.log(data.records[0]);

        this.form.id = data.records[0].id;
        this.form.questionType = data.records[0].type;
        this.form.title = data.records[0].title;
        this.form.items = data.records[0].items;
        this.form.analyze = data.records[0].analyze;
        this.form.correctArray = data.records[0].correctArray;
        this.form.score = data.records[0].score;
      }
    },
    methods: {
      handleRichEditor(id) {
        this.editorId = id;
        console.log(id);
        this.editorVisible = true;
        switch (id) {
          case 10:
            this.content = this.form.title;
            break;
          case 11:
            this.content = this.form.analyze;
            break;
          case 12:
            this.content = this.form.correctArray;
            break;
          default:
            break;
        }
      },


      //富文本失去焦点事件
      onEditorBlur($event) {

      },
      //富文本获取焦点事件
      onEditorFocus($event) {

      },
      //当富文本内容改变
      onEditorChange() {

      },
      handleClose(done) {
        this.$confirm("确认关闭?")
          .then(_ => {
            done();
          })
          .catch(_ => {

          });
      },

      /* 富文本确认 */
      handleRichEditorConfirm(id) {
        /* 富文本对应 */
        console.log(id);
        switch (id) {
          case 10:
            this.form.title = this.content;
            break;
          case 11:
            this.form.analyze = this.content;
            break;
          case 12:
            this.form.correctArray = this.content;
            break;
          case id:
            this.form.items[id].content = this.content;
            break;
          default:
            break;
        }
        this.editorVisible = false;
      },
      handleRichEditorCancel() {
        this.editorVisible = false;
      },


      /* 提交表单 */
      async submit() {
        console.log(this.form.id === '');
        if(this.form.id === ''){
          let type = this.form.questionType;
          let title = this.form.title;
          let items = this.form.items;
          let analyze = this.form.analyze;
          let correctArray = this.form.correctArray;
          let score = this.form.score;


          this.reset();
          let data = await addQuestion({ type, title, items, analyze, correctArray, score });

          this.$message.success("添加成功!");
          await this.$router.push({ path: '/questionList' });
        }else{
          let id = this.form.id;
          let type = this.form.questionType;
          let title = this.form.title;
          let items = this.form.items;
          let analyze = this.form.analyze;
          let correctArray = this.form.correctArray;
          let score = this.form.score;

          this.reset();
          await updateQuestion({ id, type, title, items, analyze, correctArray, score });

          console.log(this.form);

          this.$message.success("修改成功!");
          await this.$router.push({ path: '/questionList' });
        }
      },
      /* 重置表单 */
      reset() {
        this.$refs.form.resetFields();
        let items = [
          { prefix: 'A', content: '是' },
          { prefix: 'B', content: '否' },
        ]
        this.form.items = items;
      },

      /* 试题预览 */
      preview() {
        this.previewVisible = true;
      },
    },
    watch: {
      editorVisible() {
        if (this.editorVisible === false) {
          this.content = '';
        }
      }
    },
    components: {
      quillEditor
    }
  };
</script>

<style scoped>
  .single-form{
    width: 80%;
    margin-top: 5%;
    margin-left: 15%;
  }

  .question-item-label{
    position: relative;
    margin-top: 5%;
    padding-top: 2%;
  }


  /* 富文本样式 */
  .editor_confirm{
    margin-top: 1%;
    margin-left: -5%;
  }

  .editor_cancel{
    margin-left: 20%;
  }

  .analyze{
    margin-top: 5%;
  }


  .buttons{
    margin-top: 3%;
    padding-left: 5%;
  }

</style>
